<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="html5plus://ready"></script>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<script src="../../js/flexible.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			html,body{
				width: 100%;
				height: 100%;
			}
			.sf-item{
				width: 100%;
				height: auto;
			}
			.sf-xinxi{
				width: 100%;
				height: 1.78rem;
				background: #fff;
				display: flex;
			}
			.sf-name{
				font-size: 0.68rem;
				color: #ccc;
				font-family: "微软雅黑";
				padding:0 0.28rem;
				border-right: 0.06rem solid #ccc;
				height: 0.65rem;
				margin: 0.5rem 0.28rem 0 0;
			}
			.sf-location{
				color: #ccc;
				font-size: 0.31rem;
				font-family: "微软雅黑";
			}
			.szd{
				margin-top: 0.3rem;
				margin-bottom: -0.09rem;
			}
			.more-img{
				width: 100%;
				margin-top: 0.18rem;
			}
			.more-img img{
				border-radius: 0.12rem;
				margin: 0.18rem 0.08rem 0;
				display: inline-block;
				float: left;
				width: 114px;
			}
			.mui-bar .mui-segmented-control{
				top: 0;
				line-height: 44px;
			}
			.mui-bar .mui-segmented-control a{
				color: #fff;
				font-size: 20px;
			}
			.mui-segmented-control{
				border: 0;
			}
			#indext{
				border-bottom: 2px solid #fff;
				margin-left: 0.5rem;
			}
			#indext{
				border-bottom: 2px solid #fff;
			}
			.back{
				position: fixed;
				right: 0.5rem;
				bottom: 2.5rem;
			}
			.back img{
				width: 1.25rem;
				height: 1.25rem;
			}

		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<div class="mui-segmented-control">
				<a id="index" class="">热门动态</a>
				<a id="indext" class="xinggirl">私房照</a>
			</div>
		</header>
		
		<div id="pullrefresh" class="mui-content">
			<div class="more-img" v-for="(item,index) in items">
				<img v-lazy="item.first" class="smallxc" v-on:click="morepics(item.id,item.title)"/>
			</div>
			<div></div>
		</div>
		<div class="back">
			<img src="../../img/page/back-icon.png" alt="" />
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/function.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/md5.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vue-lazyload.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
					    color:'#fd698d', //可选，默认“#2BD009” 下拉刷新控件颜色
					    height:'50px',//可选,默认50px.下拉刷新控件的高度,
					    range:'100px', //可选 默认100px,控件可下拉拖拽的范围
					    offset:'45px', //可选 默认0px,下拉刷新控件的起始位置
					    auto: true,
						callback: pulldownRefresh
					},
					up: {
						auto:true,
						contentrefresh: '加载更多…',
						callback: jiazai
					}
				}
			});
			Vue.use(VueLazyload, {
				preLoad: 1.3,
				error: '../../img/function/lodingerro.png',
				loading: '../../img/function/lodings.gif',
				attempt: 1
			});
			var sfz = new Vue({
				el:'.mui-content',
				data:{
					items:[]
				},
				methods:{
					morepics:function(id,title){
						mui.openWindow({
							url:'morepics.html',
							id:'morepics.html',
							extras:{
								sid:id
							},
							styles: {                             // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
							    titleNView: {                       // 窗口的标题栏控件
							    	autoBackButton:true,
								    titleText:title,                // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题
								    titleColor:"#FFFFFF",             // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
								    titleSize:"18px",                 // 字体大小,默认17px
								    backgroundColor:"#fd698d",        // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
								    progress:{                        // 标题栏控件的进度条样式
								        color:"#00FF00",                // 进度条颜色,默认值为"#00FF00"  
								        height:"2px"                    // 进度条高度,默认值为"2px"         
								    },
								    splitLine:{                       // 标题栏控件的底部分割线，类似borderBottom
								        color:"#CCCCCC",                // 分割线颜色,默认值为"#CCCCCC"  
								        height:"1px"                    // 分割线高度,默认值为"2px"
								    }
							    }
							}
						})
					}
				}
			})

			function pulldownRefresh(){
				page = 0;
				jiazai();
				mui('#pullrefresh').pullRefresh().endPulldown(true);
				mui('#pullrefresh').pullRefresh().refresh(true);
			}
			var page = 0;
			var dongtaiurl = getApiUrl('http://www.jiaoyou0.cn', 'userdata/sifanglist');
			function jiazai(){
				
				mui.ajax(dongtaiurl, {
					type: 'GET',
					dataType: 'json',
					timeout: 3000,
					data:{
						page:page
					},
					success: function(data) {
						if(data.code==200){
							if(page===0){
								var lda = [];
							}else{
								var lda = sfz.items;
							}
							mui.each(data.data,function(index,item){
								lda.push(item)
							})
							sfz.items = lda;	
							mui('#pullrefresh').pullRefresh().endPullup();
						}else{
							mui.toast('木有了')
							mui('#pullrefresh').pullRefresh().endPullup(true);
						}
						page = page+1;
					},
					error: function(xhr, type, errorThrown) {
						mui.toast('网络不好，重试下吧！')
					}
				})
				
			}
			mui('.mui-bar').on('tap','#index',function(){
				mui.back()
			})
			mui('.back').on('tap','img',function(){
				mui.back();
			})
		</script>
	</body>

</html>